<template>
  <main-content title="规格管理" back>
    <main-content-actions-wrapper>
      <el-button type="primary" @click="showAddProduct">
        <el-icon><Plus /></el-icon>
        新增规格
      </el-button>
    </main-content-actions-wrapper>

    <el-table ref="productListTableRef" :data="productList" v-loading="loading">
      <el-table-column label="ID" prop="id" width="180"></el-table-column>
      <el-table-column label="规格名称" prop="name" min-width="180"></el-table-column>
      <el-table-column label="规格图片" prop="thumbnailUrl" width="120">
        <template #default="scope">
          <el-image fit="contain" :src="scope.row.thumbnailUrl" style="width: 80px; height: 80px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="市场价格(元)" prop="originalPrice" min-width="150">
        <template #default="scope">
          {{formatPayPrice(scope.row.originalPrice)}}
        </template>
      </el-table-column>
      <el-table-column label="售价" min-width="150">
        <template #default="scope">
          {{scope.row.payOfCurrencyCount}}积分 + {{formatPayPrice(scope.row.payPrice)}}元
        </template>
      </el-table-column>
      <el-table-column label="总库存" prop="totalStock" min-width="150"></el-table-column>
      <el-table-column label="剩余库存" prop="stock" min-width="150"></el-table-column>
      <el-table-column label="状态" prop="onlineStatus" min-width="150">
        <template #default="scope">
          {{formatStatus(scope.row.onlineStatus)}}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updateTime" min-width="180">
        <template #default="scope">
          {{formatTime(scope.row.updateTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="" fixed="right" width="160">
        <template #default="scope">
          <el-button link type="primary" @click="showEdit(scope.row)">编辑</el-button>
          <el-button link type="primary" @click="switchStatus(scope.row, scope.$index)"
                     v-if="scope.row.onlineStatus">下线
          </el-button>
          <el-button link type="primary" @click="switchStatus(scope.row, scope.$index)"
                     v-else="scope.row.onlineStatus">上线
          </el-button>
          <el-button link type="danger" @click="_deleteProduct(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <edit-product v-model:show="isShowEdit" :mode="editDialogMode" :row-data="operatingRow" @saved="handleEditSaved"></edit-product>
  </main-content>
</template>

<script lang="ts" setup>
import {Ref} from "vue";
import moment from "moment";
import {ElMessage} from "element-plus/es";
import {deleteProduct, getGoodsProducts, switchProductStatus} from "@/api/pointsMall";
import {IStoreProductRow} from "@/api/modules/pointsMall";
import EditProduct from "./components/EditProduct.vue"
/**
 * 规格列表
 */
const route = useRoute()
const router = useRouter()

const loading = ref(false)
const searchForm = reactive({
  id: route.query.id as string,
  currentPage: 1,
})
// 获取该商品的规格
const productList = ref<IStoreProductRow[]>([])
const _getGoodsProducts = async () => {
  loading.value = true
  const rs = await getGoodsProducts({id: searchForm.id})
  loading.value = false
  if (rs.code === 200) {
    productList.value = rs.payload ?? []
  }
}

const formatPayPrice = (val: number) => {
  return isNaN(val) ? val : val / 100 // 后端以分为单位保存
}

const formatStatus = (val:number) => {
  if (val === 1) {
    return '上线'
  }

  if (val === 0) {
    return '下线'
  }
}

const formatTime = (val: number) => {
  return moment(val).format('YYYY.MM.DD HH:mm:ss')
}

const isShowEdit:Ref<boolean> = ref(false)
const editDialogMode = ref<'edit' | 'create'>('create')
const operatingRow: Ref<IStoreProductRow | undefined> = ref<IStoreProductRow>()
const showEdit = (row: IStoreProductRow) => {
  editDialogMode.value = 'edit'
  operatingRow.value = row
  isShowEdit.value = true
}

const showAddProduct = () => {
  editDialogMode.value = 'create'
  isShowEdit.value = true
}

const handleEditSaved = () => {
  _getGoodsProducts()
}

// 切换上下线状态
const switchStatus = async (row: IStoreProductRow) => {
  if (row.id) {
    const rs = await switchProductStatus({id: row.id, name: row.name}) // 上下线

    if (rs.code === 200) {
      ElMessage.success('切换成功')
      _getGoodsProducts()
    }
  } else {
    ElMessage.warning('切换状态失败：商品未保存')
  }
}

// 删除规格行
const _deleteProduct = async (row: IStoreProductRow, index: number) => {
  if (row.id) { // 数据库中的数据
    const rs = await deleteProduct({id: row.id})

    if (rs.code === 200) {
      ElMessage.success('删除成功')
      _getGoodsProducts()
    }
  } else { // 添加后未保存的数据行
    productList.value.splice(index, 1)
  }
}

onMounted(() => {
  _getGoodsProducts()
})

</script>

<style scoped lang="scss">

</style>
